<template>
	<div class="SinglePicSelector">
		<span @click="selectPic">
			<slot>
				<Img :src="selected" width="100px" height="100px" style="cursor: pointer" />
			</slot>
		</span>
	</div>
	<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="1" @submit="getPic" />
</template>
<script setup>
import { arrHasData } from '/@/utils';
import PictureSelectorDialog from './PictureSelectorDialog.vue';

const props = defineProps({
	modelValue: {
		type: String,
		default: '',
	},
});
const emit = defineEmits(['update:modelValue']);
const selected = computed({
	get: () => props.modelValue,
	set(val) {
		emit('update:modelValue', val);
	},
});
const isShowPicSelector = ref(false);

function selectPic() {
	isShowPicSelector.value = true;
}

function getPic(pic) {
	if (!arrHasData(pic)) return;
	selected.value = pic[0].imgUrl;
}
</script>
